import { useDataMapping, useDigital, useLocale } from "@/hooks"

// Defining the interface based on the Vue table columns
export interface RootObject {
	loginTime: string
	loginStatus: number
	userName: string
	merchantId: string
	loginIp: string
	ipControlName: string
	ipAttribution: string
	deviceType: number
	deviceNo: string
	deviceNoControlName: string
	loginReference: string
	browseContent: string
	loginError: string
}

// Function to generate the column definitions for the agentLogin table
const agentLogin = () => {
	const { newFormat } = useLocale()
	const { renderCopyNo } = useDigital()
	const { getFromDic } = useDataMapping()

	const agentLogin_loginTime = {
		title: "agent.agent_login_time",
		width: 180
	}
	const agentLogin_loginStatus = {
		title: "agent.login_status",
		width: 100,
		render: getFromDic("loginStatusType", false)
	}
	const agentLogin_userName = {
		title: "agent.agent_account",
		width: 120,
		render: renderCopyNo
	}
	const agentLogin_merchantId = {
		title: "common.belong_merchant",
		width: 120
	}
	const agentLogin_loginIp = {
		width: 150,
		title: () => (
			<>
				{newFormat("agent.login_ip")}
				<br />
				{newFormat("common.risk_control_level")}
			</>
		),
		render: (_: string, row: RootObject) => (
			<>
				<span>{row.loginIp || "-"}</span>
				<br />
				<span className="redColor">
					{newFormat("common.risk_control_level")}：{row.ipControlName || newFormat("agent.none")}
				</span>
			</>
		)
	}
	const agentLogin_ipAttribution = {
		title: "agent.ip_attribute",
		width: 150
	}
	const agentLogin_deviceType = {
		title: "agent.login_terminal",
		width: 150,
		render: getFromDic("loginDeviceType", false)
	}
	const agentLogin_deviceNo = {
		width: 150,
		title: () => (
			<>
				{newFormat("agent.terminal_device")}
				<br />
				{newFormat("common.risk_control_level")}
			</>
		),
		render: (_: string, row: RootObject) => (
			<>
				<span>{row.deviceNo || "-"}</span>
				<br />
				<span className="redColor">
					{newFormat("common.risk_control_level")}：{row.deviceNoControlName || newFormat("agent.none")}
				</span>
			</>
		)
	}
	const agentLogin_loginReference = {
		title: "agent.login_url",
		width: 150
	}
	const agentLogin_browseContent = {
		title: "agent.device_version",
		width: 200,
		render: (_: string, row: RootObject) => (row.browseContent === "UNKNOWN" ? "-" : row.browseContent || "-")
	}
	const agentLogin_loginError = {
		title: "common.remark",
		width: 150
	}

	return {
		agentLogin_loginTime,
		agentLogin_loginStatus,
		agentLogin_userName,
		agentLogin_merchantId,
		agentLogin_loginIp,
		agentLogin_ipAttribution,
		agentLogin_deviceType,
		agentLogin_deviceNo,
		agentLogin_loginReference,
		agentLogin_browseContent,
		agentLogin_loginError
	}
}

export default agentLogin
